<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: red;
        }

        body {
            background-color: rgb(16, 141, 141);
            font-size: 14px;
            color: #666;
        }

        .part-1 {
            width: 1190px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .part-1 .left {
            width: 230px;
            height: 460px;
            background-color: #fff;
            position: relative;
        }

        .nav-list li {
            height: 51px;
            line-height: 50px;

        }

        .nav-list li img {
            height: 16px;
            /* 左右居中 */
            margin: 0 10px;
            /* vertical-align: middle; */
            vertical-align: -3px;
        }

        .nav-list li:hover {
            background-color: #eee;
        }

        .list-cont {
            position: absolute;
            top: 0;
            left: 230px;
            width: 0px;
            height: 460px;
            background-color: #fff;

            /* display: none; */
            /* opacity: 0; */
            /* 透明度可以添加过渡效果 */
            transition: width 1s;
            /* 过渡效果  时间 */
            overflow: hidden;
        }

        .nav-list li:hover .list-cont {
            /* display: block; */
            /* opacity: 1; */
            width: 700px;
        }
    </style>
</head>

<body>
    <div class="part-1">
        <div class="left">
            <ul class="nav-list">
                <li> <img src="./img1/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">
                    <a href="">劳保/</a>
                    <a href="">安防、</a>
                    <a href="">标识</a>
                    <div class="list-cont">

                        <div style="width: 700px;">弹出层1</div>
                    </div>
                </li>
                <li> <img src="./img1/265672d2-0170-4f28-9439-326163960a3e.png" alt="">
                    <a href="">手工具/</a>
                    <a href="">动力工具/</a>
                    <a href="">工具耗材</a>
                    <div class="list-cont">
                        <div style="width: 700px;">弹出层1</div>
                    </div>
                </li>
                <li> <img src="./img1/4982eb59-c487-4b8a-86dd-d627fc63c100.png" alt="">
                    <a href="">办公/</a>
                    <a href="">清洁/</a>
                    <a href="">制冷、暖通</a>
                    <div class="list-cont">
                        <div style="width: 700px;">弹出层1</div>
                    </div>
                </li>
                <li> <img src="./img1/88d27392-e663-471e-8bfa-7efd64f0ddf8.png" alt="">
                    <a href="">中低压/</a>
                    <a href="">工控/</a>
                    <a href="">照明/电工</a>
                    <div class="list-cont">
                        <div style="width: 700px;">弹出层1</div>
                    </div>
                </li>
                <li> <img src="./img1/ad951828-688d-43ef-9e7f-af1d3eddcd27.png" alt="">
                    <a href="">刀具/</a>
                    <a href="">量具/磨具/</a>
                    <a href="">仪器仪表</a>
                    <div class="list-cont">
                        弹出层5
                    </div>
                </li>
                <li> <img src="./img1/aef39837-eb23-4b25-8226-3b56ccf733ee.png" alt="">
                    <a href="">气动/</a>
                    <a href="">轴承/机械/</a>
                    <a href="">紧固件</a>
                    <div class="list-cont">
                        弹出层6
                    </div>
                </li>
                <li> <img src="./img1/c173e15a-c619-4787-897d-59928216c7ae.png" alt="">
                    <a href="">胶粘/</a>
                    <a href="">润滑/</a>
                    <a href="">车间化学品</a>
                    <div class="list-cont">
                        弹出层7
                    </div>
                </li>
                <li> <img src="./img1/e673a292-a93c-477a-9db5-ced8cc508603.png" alt="">
                    <a href="">搬运/</a>
                    <a href="">储存/</a>
                    <a href="">包材</a>
                    <div class="list-cont">
                        弹出层8
                    </div>
                </li>
                <li> <img src="./img1/f5cc805c-5b30-435a-b0fb-3c8c61c24f3d.png" alt="">
                    <a href="">实验室用品</a>
                    <a href=""></a>
                    <a href=""></a>
                    <div class="list-cont">
                        弹出层9
                    </div>
                </li>
            </ul>
            <!-- <div class="content"></div> -->
        </div>
    </div>
</body>

</html>